<template>
  <div class="pay-main">
    <div class="pay-container">

      <div class="checkout-steps">

        <div class="pay-top">
          <div class="success-icon"></div>

          <div class="pay-top-right">

              <div class="pay-top-right-top">

                <div class="success-info">
                  订单提交成功，请您及时付款，以便尽快为您发货~~
                  <span class="pay-money">
                    <em class="lead">应付金额：</em>
                    <!-- <em class="orange money">￥{{ payInfo.totalFee }}</em> -->
                    <em class="orange money">￥23.00</em>
                  </span>
                </div>

                <div class="success-info-ps">
                  请您在提交订单<em class="orange time">4小时</em>之内完成支付，超时订单会自动取消。 
                </div>
              </div>

              <div class="hr"></div>

              <div class="checkout-info">
                <div class="checkout-info-item ">订单号：<em class="orange">1002341354351{{orderId }}</em></div> 
                <div class="checkout-info-item">收货信息：shuang 1239452234 广东省 广州市 番禺区 广州番禺职业技术学院<em>{{orderId }}</em></div> 
                <div class="checkout-info-item">商品名称：洞洞鞋43码<em>{{orderId }}</em></div> 
              </div>
          </div>
        </div>

      <div class="hr"></div>

        <div class="step-tit">
          <h5>支付平台</h5>
        </div>
        <div class="step-cont">
          <ul class="payType">
            <li><img src="./images/pay2.jpg" /></li>
            <li><img src="./images/pay3.jpg" /></li>
          </ul>
        </div>
        <div class="hr"></div>

        <div class="submit">
          <a class="btn" @click="open">立即支付</a>
        </div>
        <div class="otherpay">
          <div class="step-tit">
            <h5>其他支付方式</h5>
          </div>
          <div class="step-cont">
            <span><a href="weixinpay.html" target="_blank">微信支付</a></span>
            <span>中国银联</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
// import QRCode from "qrcode";
export default {
  name: "Pay",
  data() {
    return {
      payInfo: {},
      timer: null,
      //支付状态码
      code: "",
    };
  },
  computed: {
    orderId() {
      // return this.$route.query.orderId;
    },
  },
  //工作的时候：尽量别再生命周期函数中async|await
  mounted() {
    //   this.getPayInfo();
  },
  methods: {
    //获取支付信息
    async getPayInfo() {
      let result = await this.$API.reqPayInfo(this.orderId);
      //如果成功：组件当中存储支付信息
      if (result.code == 200) {
        this.payInfo = result.data;
      }
    },
    //弹出框
    async open() {
      this.$router.push("/center/orderlist")
    },
  },
};
</script>
  
<style lang="less" scoped>
  .pay-top{
    
    display: flex;
    flex-direction:row; 
    height: 200px;
    align-items: center;
  }
  .success-icon {
    width: 120px;
    height: 100px;
    display: inline-block;
    background: url(./images/success.png) no-repeat;
    background-size: 80px;
  }
  .pay-top-right{
    flex: 1;
    display: flex;
    flex-direction:column; 
  }
  .pay-top-right-top{
    height: 80px;
  }
  .success-info{
    font-size: 20px;
    text-align: left;
    padding-top: 0;
  }
  .success-info-ps{
    font-size: 10px;
    text-align: left;
    padding: 10px 30px;
  }
  .pay-money{
    float: right;
    font-size: 15px;
  }


  .checkout-info {
    padding-top: 20px;
    height: 80px;
    widows: 100%;
    text-align: left; 
    .checkout-info-item{
      padding: 5px 0;
    }
  }


.pay-main {
  margin-top: 30px;
  margin-bottom: 20px;

  .pay-container {
    margin: 0 auto;
    width: 1200px;

    a:hover {
      color: #4cb9fc;
    }

    .orange {
      //应付金额
      color: #e1251b;
    }

    .money {
      font-size: 18px;
    }

    .checkout-steps {
      border: 1px solid #ddd;
      padding: 25px;

      .hr {
        height: 1px;
        background-color: #ddd;
      }

      .step-tit {
        line-height: 36px;
        margin: 15px 0;
      }

      .step-cont {
        margin: 0 10px 12px 20px;

        ul {
          font-size: 0;

          li {
            margin: 2px;
            display: inline-block;
            padding: 5px 20px;
            border: 1px solid #ddd;
            cursor: pointer;
            line-height: 18px;
          }
        }
      }
    }

    .submit {
      text-align: center;

      .btn {
        display: inline-block;
        padding: 15px 45px;
        margin: 15px 0 10px;
        font: 16px "微软雅黑";
        font-weight: 600;
        border-radius: 0;
        background-color: orange;
        border: 1px solid orange;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        text-decoration: none;
      }
    }
  }
}
</style>
  